<template>
	<view class="select-box">
		<view class="header tn-flex tn-flex-col-center tn-flex-row-between">
			<view class="title" v-if="pageSource === 'index'">
				<image src="@/static/index/zhaotawan.png"></image>
			</view>
			<view class="sort tn-flex tn-flex-col-center tn-flex-row-between"
				:style="pageSource === 'index'?'padding-left:100rpx;':''">
				<block v-for="(item,index) in tabs" :key="index">
					<view class="tn-flex tn-flex-col-center tab-box" @click="tabClick(item,index)" v-if="item.isShow">
						<span :style="item.unfold?'color: #52bca4;':''">{{item.name}}</span>
						<text class="triangle-icon tn-icon-up-triangle" style="color: #52bca4;"
							v-if="item.unfold"></text>
						<text class="triangle-icon tn-icon-down-triangle" v-else></text>
						<view class="pop-bottom tn-flex tn-flex-col-center  tn-flex-direction-column"
							v-if="item.unfold && item.type == 'bottom'">
							<view class="pop-bottom-item" :style="item.value === son.sonId ?'color: #52bca4;':''"
								v-for="son in item.children" :key="son.sonId" @click="chooseItem(son,index)">
								{{son.name}}
							</view>
						</view>
					</view>
				</block>

			</view>
		</view>
		<!-- 日期选择 -->
		<l-calendar v-model="showDate" @change="changeDate" @input="inputDate" @resetData="changeDate"
			:isRange="false"></l-calendar>
		<filter-popup :data="filterData" :form.sync="filterForm" v-model="popup.filter" title="活动类型" height="1304rpx"
			@finsh="subFinsh"></filter-popup>
		<!-- 列表 -->
		<ListItem :tabCurrent="tabCurrent"></ListItem>
		<view class='tn-tabbar-height'></view>
	</view>
</template>

<script>
	import FilterPopup from "@/components/filter-popup/filter-popup";
	import ListItem from '@/components/index-com/item-list/index.vue';

	export default {
		components: {
			FilterPopup,
			ListItem
		},
		props: {
			pageSource: {
				type: String,
				default: 'index'
			},
			tabCurrent: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				showDate: false,
				tabs: [{
						id: 1,
						value: 1,
						name: '智能排序',
						unfold: false,
						isShow: true,
						type: 'bottom',
						children: [{
								sonId: 1,
								name: '智能排序',
							},
							{
								sonId: 2,
								name: '时间优先',
							},
							{
								sonId: 3,
								name: '距离优先',
							}
						]
					},
					{
						id: 3,
						value: '',
						name: '日期',
						unfold: false,
						isShow: false,
					},
					{
						id: 4,
						value: 1,
						name: '距离',
						unfold: false,
						isShow: false,
						type: 'bottom',
						children: [{
								sonId: 1,
								name: '距离',
							},
							{
								sonId: 2,
								name: '附近',
							},
							{
								sonId: 3,
								name: '10KM',
							},
							{
								sonId: 4,
								name: '20KM',
							}
						]
					},
					{
						id: 5,
						value: '',
						name: '活动类型',
						unfold: false,
						isShow: true,
					},
				],
				popup: {
					filter: false
				},
				//筛选表单数据
				filterData: [{
					children: false, //是否有子项
					// title: "意向度",
					key: "intention_type", //键名 接收对象名字
					keyValue: "value", //获取的值是哪个
					isRadio: true, //是否单选 否则多选
					data: [{
							title: "羽毛球",
							id: 1,
							value: 1,
						},
						{
							title: "篮球",
							id: 2,
							value: 2,
						},
						{
							title: "足球",
							id: 3,
							value: 3,
						},
						{
							title: "网球",
							id: 4,
							value: 4,
						},
					],
				}], //筛选数据
				filterForm: {}, //选中的表单
			}
		},
		watch: {
			pageSource: {
				handler(val) {
					console.log(val, 'val');
					if (val === 'activity') {
						this.tabs.forEach(item => {
							if (item.name === '智能排序') {
								item.isShow = false
							} else {
								item.isShow = true
							}
						})
					}
				},
				immediate: true
			}
		},
		methods: {
			// 日期弹窗
			inputDate(val) {
				console.log(val, 'val');
				if (!val) this.tabs[1].unfold = false;
			},
			isDateFormat(value) {
				const dateRegex = /^\d{4}[-/]\d{2}[-/]\d{2}$/; // 匹配 YYYY-MM-DD 或 YYYY/MM/DD
				return dateRegex.test(value);
			},
			// 选择日期
			changeDate(item) {
				console.log(item, 'item');
				if (item && this.isDateFormat(item.result)) {
					this.tabs[1].name = item.result;
					this.tabs[1].value = item.result;
				} else {
					this.tabs[1].name = '日期';
					this.tabs[1].value = '';
				}
				this.tabs[1].unfold = false;
			},
			// 选择
			chooseItem(son, index) {
				console.log(son, index);
				this.tabs[index].value = son.sonId;
				this.tabs[index].name = son.name;
			},
			// 点击tab
			tabClick(item, index) {
				console.log(item, 'item');
				this.setOtherShowFalse(item);
				this.tabs[index].unfold = !this.tabs[index].unfold;
				switch (item.id) {
					case 1:
						break;
					case 5:
						this.popup.filter = true;
						break;
					case 3:
						this.showDate = true;
						break;
					case 4:

						break;
					default:
						break;
				}
			},
			setOtherShowFalse(info) {
				this.tabs.forEach(item => {
					if (item.id != info.id) {
						item.unfold = false;
					}
				})
			},
			// 活动类型筛选完成
			subFinsh(item) {
				console.log(item.intention_type[0], 'item');
				const value = item.intention_type[0];
				if (!value) {
					this.tabs[3].name = '活动类型'
					this.tabs[3].value = '';
					this.tabs[3].unfold = false;
				}
				// console.log(value, 'value');
				// console.log(this.filterData[0].data);
				const filterName = this.filterData[0].data.filter(item => item.id === value);
				// console.log(filterName, 'filterName');
				if (filterName.length > 0) {
					this.tabs[3].name = filterName[0].title;
					this.tabs[3].value = value;
					this.tabs[3].unfold = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-box {
		border-radius: 30rpx 30rpx 0 0;
		background: rgb(226, 241, 239);
		padding: 0 25rpx;
		padding-bottom: 25rpx;

		.header {
			height: 114rpx;
			width: 100%;

			.title {
				width: 180rpx;
				height: 76rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.sort {
				flex: 1;
				font-weight: 600;
				font-size: 32rpx;
				padding: 0 30rpx 0 30rpx;

				.tab-box {
					position: relative;

					.pop-bottom {
						position: absolute;
						top: 55rpx;
						left: 50%;
						transform: translate(-50%);
						min-width: 200rpx;
						// min-height: 300rpx;
						border-radius: 20rpx;
						z-index: 999;
						background: #fff;
						// border: 1rpx solid #000;
						font-weight: 400;
						box-shadow: 6rpx 6rpx 8rpx $tn-shadow-color;

						.pop-bottom-item {
							min-width: 130rpx;
							padding: 25rpx 10rpx;
							text-align: center;
							border-bottom: 1rpx solid #d5d5d5;
						}

						.pop-bottom-item:last-child {
							border-bottom: none;
							/* 最后一行移除边框 */
						}
					}
				}
			}

		}
	}
</style>